<template>
    <div class="w-full">
        <div class="w-full px-6">
            <div class="lg:flex flex-wrap">
                <div class="py-10 lg:w-2/3 w-full md:pr-6 sm:border-r border-gray-300">
                    <a href="courses.html">
                        <div class="flex items-center">
                            <div
                                    class="mr-3 w-6 h-6 rounded-full text-gray-500 border border-gray-500 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="18"
                                     height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                                     stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" />
                                    <polyline points="15 6 9 12 15 18" />
                                </svg>
                            </div>
                            <h4 class="text-xl text-gray-900">Course Details</h4>
                        </div>
                    </a>
                    <h1 class="font-bold text-gray-800 text-5xl mt-6 mb-8 sm:text-left text-center">
                        Introduction to Design Thinking
                    </h1>
                    <div class="sm:flex items-center">
                        <button
                                class="focus:outline-none ml-0 md:mr-5 bg-red-700 transition duration-150 ease-in-out hover:bg-red-800 rounded text-white sm:px-3 px-6 py-2 text-xl sm:ml-0 ml-8">
                            UX Design
                        </button>
                        <ul class="sm:flex sm:mt-0 mt-8 items-center">
                            <li class="text-gray-600 flex items-center text-base px-6 sm:border-l border-gray-300">
                                <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 icon icon-tabler icon-tabler-clock"
                                     width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                                     stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" />
                                    <circle cx="12" cy="12" r="9" />
                                    <polyline points="12 7 12 12 15 15" />
                                </svg>
                                <p class="ml-3">3 hours, 30 minutes</p>
                            </li>
                            <li
                                    class="text-gray-600 flex items-center text-base px-6 sm:border-r sm:border-l border-gray-300 sm:py-0 py-2">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     class="flex-shrink-0 icon icon-tabler icon-tabler-file-horizontal" width="24" height="24"
                                     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                                     stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" />
                                    <path d="M16 5v4a1 1 0 0 0 1 1h4" />
                                    <path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2 -2v-7l-5 -5h-11a2 2 0 0 0 -2 2z" />
                                </svg>
                                <p class="ml-3">3 modules</p>
                            </li>
                            <li class="text-gray-600 flex items-center text-base px-6">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     class="flex-shrink-0 icon icon-tabler icon-tabler-calendar-event" width="24" height="24"
                                     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                                     stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" />
                                    <rect x="4" y="5" width="16" height="16" rx="2" />
                                    <line x1="16" y1="3" x2="16" y2="7" />
                                    <line x1="8" y1="3" x2="8" y2="7" />
                                    <line x1="4" y1="11" x2="20" y2="11" />
                                    <rect x="8" y="15" width="2" height="2" />
                                </svg>
                                <p class="ml-3">17 Aug - 19 Sept</p>
                            </li>
                        </ul>
                    </div>
                    <hr class="mt-8 mb-6 border-t border-gray-300" />
                    <h4 class="text-gray-900 text-xl font-medium mb-6">
                        Course Details
                    </h4>
                    <p class="text-gray-600 mb-2">
                        Et quidem faciunt, ut de voluptate ponit, quod summum bonum sit
                        aut rerum. Et quidem rerum facilis est cur verear, ne ferae
                        quidem se texit, ne. Ut placet, inquam tum dicere exorsus est et
                        voluptates…
                    </p>
                    <p class="color-blue mb-2">Read more</p>
                    <hr class="my-8 border-t border-gray-300" />
                    <h4 class="text-gray-900 text-xl font-medium mb-3">
                        Introduction
                    </h4>
                    <div class="flex items-center">
                        <p class="text-gray-600 text-sm">3 Lectures</p>
                        <span class="mx-2 rounded-full w-1 h-1 bg-gray-300"></span>
                        <p class="text-gray-600 text-sm">2 Videos</p>
                        <span class="mx-2 rounded-full w-1 h-1 bg-gray-300"></span>
                        <p class="text-gray-600 text-sm">2 Assignments</p>
                    </div>

                    <div>
                        <div class="flex py-6 justify-between items-center border-b border-gray-200">
                            <div class="flex items-center">
                                <h5 class="text-gray-900 font-medium">1.0</h5>
                                <h5 class="text-gray-900 font-medium ml-3">
                                    What is Design?
                                </h5>
                            </div>
                            <div data-menu class="cursor-pointer">
                                <div class="flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-label="Hide"
                                         class="icon icon-tabler icon-tabler-chevron-up" width="28" height="28" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="#718096" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" />
                                        <polyline points="6 15 12 9 18 15" />
                                    </svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-label="Show"
                                         class="hidden icon icon-tabler icon-tabler-chevron-down" width="28" height="28"
                                         viewBox="0 0 24 24" stroke-width="1.5" stroke="#718096" fill="none" stroke-linecap="round"
                                         stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z"></path>
                                        <polyline points="6 9 12 15 18 9"></polyline>
                                    </svg>
                                    <span class="ml-6 text-gray-600 text-sm">12:29</span>
                                </div>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm mt-4">
                            Et quidem faciunt, ut de voluptate ponit, quod summum bonum
                            sit aut rerum. Et quidem<br />
                            rerum facilis est cur verear, ne ferae quidem se texit, ne. Ut
                            placet, inquam tum dicere <br /><br />- User Experience
                            heuristics <br />- Why white space is your best friend <br />-
                            Empathy in design decisions <br />- User Experience heuristics
                        </p>
                    </div>
                    <div>
                        <div class="flex py-6 justify-between items-center border-b border-gray-200">
                            <div class="flex items-center">
                                <h5 class="text-gray-900 font-medium">1.1</h5>
                                <h5 class="text-gray-900 font-medium ml-3">
                                    Introduction to Design Thinking?
                                </h5>
                            </div>
                            <div data-menu class="cursor-pointer">
                                <div class="flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-label="Hide"
                                         class="icon icon-tabler icon-tabler-chevron-up" width="28" height="28" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="#718096" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" />
                                        <polyline points="6 15 12 9 18 15" />
                                    </svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-label="Show"
                                         class="hidden icon icon-tabler icon-tabler-chevron-down" width="28" height="28"
                                         viewBox="0 0 24 24" stroke-width="1.5" stroke="#718096" fill="none" stroke-linecap="round"
                                         stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z"></path>
                                        <polyline points="6 9 12 15 18 9"></polyline>
                                    </svg>
                                    <span class="ml-6 text-gray-600 text-sm">12:29</span>
                                </div>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm mt-4">
                            Et quidem faciunt, ut de voluptate ponit, quod summum bonum
                            sit aut rerum. Et quidem<br />
                            rerum facilis est cur verear, ne ferae quidem se texit, ne. Ut
                            placet, inquam tum dicere <br /><br />- User Experience
                            heuristics <br />- Why white space is your best friend <br />-
                            Empathy in design decisions <br />- User Experience heuristics
                        </p>
                    </div>
                    <div>
                        <div class="flex py-6 justify-between items-center border-b border-gray-200">
                            <div class="flex items-center">
                                <h5 class="text-gray-900 font-medium">1.2</h5>
                                <h5 class="text-gray-900 font-medium ml-3">
                                    Principles of User Experience
                                </h5>
                            </div>
                            <div data-menu class="cursor-pointer">
                                <div class="flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-label="Hide"
                                         class="icon icon-tabler icon-tabler-chevron-up" width="28" height="28" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="#718096" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" />
                                        <polyline points="6 15 12 9 18 15" />
                                    </svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-label="Show"
                                         class="hidden icon icon-tabler icon-tabler-chevron-down" width="28" height="28"
                                         viewBox="0 0 24 24" stroke-width="1.5" stroke="#718096" fill="none" stroke-linecap="round"
                                         stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z"></path>
                                        <polyline points="6 9 12 15 18 9"></polyline>
                                    </svg>
                                    <span class="ml-6 text-gray-600 text-sm">12:29</span>
                                </div>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm mt-4">
                            Et quidem faciunt, ut de voluptate ponit, quod summum bonum
                            sit aut rerum. Et quidem<br />
                            rerum facilis est cur verear, ne ferae quidem se texit, ne. Ut
                            placet, inquam tum dicere <br /><br />- User Experience
                            heuristics <br />- Why white space is your best friend <br />-
                            Empathy in design decisions <br />- User Experience heuristics
                        </p>
                    </div>
                </div>

                <div class="py-10 lg:w-1/3 w-full md:pl-6">
                    <h4 class="text-gray-900 text-xl font-medium mb-6">Statistics</h4>
                    <div class="mb-6 flex items-center">
                        <div>
                            <h5 class="mb-3 text-green-500 font-light text-3xl">92%</h5>
                            <p class="text-gray-900">Success Rate</p>
                        </div>
                        <div class="ml-16">
                            <h5 class="mb-3 text-green-500 font-light text-3xl">16</h5>
                            <p class="text-gray-900">Courses Taught</p>
                        </div>
                    </div>
                    <hr class="my-8 border-t border-gray-300" />
                    <div class="flex items-center justify-between mb-6">
                        <h4 class="text-gray-900 text-xl font-medium">
                            Upcoming Assignments
                        </h4>
                        <a class="color-blue text-sm font-bold cursor-pointer">View All</a>
                    </div>
                    <p class="text-gray-600 mb-6">09/02/20 - Applied UX Hueristics</p>
                    <p class="text-gray-600 mb-6">09/02/20 - Applied UX Hueristics</p>
                    <p class="text-gray-600">09/02/20 - Applied UX Hueristics</p>
                    <div class="py-16">
                        <div class="flex items-center justify-between mb-6">
                            <h4 class="text-gray-900 text-xl font-medium">Resources</h4>
                            <a class="color-blue text-sm font-bold cursor-pointer">View All</a>
                        </div>
                        <div class="xl:w-full xl:mx-0 border-b border-gray-300 rounded h-12 mb-8">
                            <ul class="flex items-center xl:justify-between">
                                <li onclick="activeTab(this)"
                                    class="text-sm color-blue bg-gray-100 py-2 px-4 rounded text-sm cursor-pointer">
                                    Videos
                                </li>
                                <li onclick="activeTab(this)" class="text-sm text-gray-600 py-2 px-4 rounded text-sm cursor-pointer">
                                    Slides
                                </li>
                                <li onclick="activeTab(this)" class="text-sm text-gray-600 py-2 px-4 rounded text-sm cursor-pointer">
                                    Audio Notes
                                </li>
                            </ul>
                        </div>
                        <div class="flex items-center mb-8 text-gray-600">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-movie" width="16"
                                 height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" />
                                <rect x="4" y="4" width="16" height="16" rx="2" />
                                <line x1="8" y1="4" x2="8" y2="20" />
                                <line x1="16" y1="4" x2="16" y2="20" />
                                <line x1="4" y1="8" x2="8" y2="8" />
                                <line x1="4" y1="16" x2="8" y2="16" />
                                <line x1="4" y1="12" x2="20" y2="12" />
                                <line x1="16" y1="8" x2="20" y2="8" />
                                <line x1="16" y1="16" x2="20" y2="16" />
                            </svg>
                            <p class="ml-4">Norman & Nielson TED talk on UX.mkv</p>
                        </div>
                        <div class="flex items-center mb-8 text-gray-600">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-movie" width="16"
                                 height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" />
                                <rect x="4" y="4" width="16" height="16" rx="2" />
                                <line x1="8" y1="4" x2="8" y2="20" />
                                <line x1="16" y1="4" x2="16" y2="20" />
                                <line x1="4" y1="8" x2="8" y2="8" />
                                <line x1="4" y1="16" x2="8" y2="16" />
                                <line x1="4" y1="12" x2="20" y2="12" />
                                <line x1="16" y1="8" x2="20" y2="8" />
                                <line x1="16" y1="16" x2="20" y2="16" />
                            </svg>
                            <p class="ml-4">Norman & Nielson TED talk on UX.mkv</p>
                        </div>
                        <div class="flex items-center mb-8 text-gray-600">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-movie" width="16"
                                 height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" />
                                <rect x="4" y="4" width="16" height="16" rx="2" />
                                <line x1="8" y1="4" x2="8" y2="20" />
                                <line x1="16" y1="4" x2="16" y2="20" />
                                <line x1="4" y1="8" x2="8" y2="8" />
                                <line x1="4" y1="16" x2="8" y2="16" />
                                <line x1="4" y1="12" x2="20" y2="12" />
                                <line x1="16" y1="8" x2="20" y2="8" />
                                <line x1="16" y1="16" x2="20" y2="16" />
                            </svg>
                            <p class="ml-4">Norman & Nielson TED talk on UX.mkv</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between mb-6">
                        <h4 class="text-gray-900 text-xl font-medium">Exams</h4>
                        <a class="color-blue text-sm font-bold cursor-pointer">View All</a>
                    </div>
                    <p class="text-gray-600 mb-6">
                        Exams have not yet been announced by your instructor, they will
                        appear here once they are announced
                    </p>
                    <div class="py-16">
                        <h4 class="text-gray-900 text-xl font-medium mb-6">
                            Instructor
                        </h4>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="h-8 w-8">
                                    <img src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_2.png" alt=""
                                         class="h-full w-full rounded-full overflow-hidden shadow" />
                                </div>
                                <div class="ml-2">
                                    <h5 class="text-xs text-gray-800">Harvey Specter</h5>
                                    <p class="text-xs text-gray-800">Professor</p>
                                </div>
                            </div>
                            <button
                                    class="focus:outline-none ml-0 md:ml-5 bg-white transition duration-150 ease-in-out hover:bg-gray-100 rounded text-gray-800 px-3 md:px-6 py-2 text-sm border border-gray-800">
                                Follow
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "course-info"
    }
</script>

<style scoped>

</style>
